<template>
  <div class="box">
    <header class="header">
      <van-search show-action  placeholder="输入您想要的商品" shape="round">
        <template #action>
          <van-icon name="audio" style="font-size:22px;" />
        </template>
      </van-search>
      <div>
        <ul style="display: flex;
      justify-content: space-evenly;
      align-items: center;margin-top:10px;">
            <li>
                <span style="text-align: center;"><h4>活动</h4></span>
                <p>购物享好价</p>
            </li>
            <li>
                <span style="text-align: center;"><h4>新品</h4></span>
                <p>每周上新</p>
            </li>
            <li>
                <span style="text-align: center;"><h4>客厅</h4></span>
                <p>精致生活</p>
            </li>
            <li>
                <span style="text-align: center;"><h4>厨房</h4></span>
                <p>没事不等待</p>
            </li>
        </ul>
      </div>
    </header>
    <div class="content">
        <ul class="proin">
            <li v-for="item in list" :key="item.id">
                <img style="width:100%;height:200px" :src="item.image" alt="" @click="$router.push(`/detali/${item.id}`)">
                <div>
                    <p>{{item.name}}</p>
                    <p>{{item.price}}</p>
                </div>
            </li>
        </ul>
        <ul class="proin">
            <li v-for="item in lism" :key="item.id" @click="$router.push(`/detali/${item.id}`)">
                <img style="width:100%;height:200px" :src="item.image" alt="" >
                <div>
                    <p>{{item.name}}</p>
                    <p>{{item.price}}</p>
                </div>
            </li>
        </ul>
    </div>
  </div>
</template>
<script setup>
import {ref} from 'vue'
const list=ref([
    {
        id:1,
        image:require('../../assets/tu1.jpg'),
        name:'华陵空调 新一级能效 变评率冷暖 升级款',
        price:'￥1799'
    },
    {
        id:2,
        image:require('../../assets/tu2.jpg'),
        name:'华陵空调 新一级能效 变评率冷暖 升级款',
        price:'￥1799'
    },
    
])
const lism=ref([
    {
        id:3,
        image:require('../../assets/tu3.jpg'),
        name:'华陵空调 新一级能效 变评率冷暖 升级款',
        price:'￥1799'
    },
    {
        id:4,
        image:require('../../assets/tu4.jpg'),
        name:'华陵空调 新一级能效 变评率冷暖 升级款',
        price:'￥1799'
    }
])
</script>
<style lang="scss">
.proin{
    display: flex;
    float: left;
    padding: 10px;
    li{
        margin: 10px;
    }
}
</style>